<%@ page contentType="text/html;charset=UTF-8"%>
<div id="usr">
  <el-row type="flex" class="row-info-bottom" justify="end">
    <el-col :span="2">
      <el-button type="info" class="btn-width-100" @click="handleAdd">新增用户</el-button>
    </el-col>
  </el-row>
  <el-table
      v-loading="loadingFlag"
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        type="index"
        label="序号"
        width="50">
    </el-table-column>
    <el-table-column
        prop="loginName"
        label="登录名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="realName"
        label="真实姓名">
    </el-table-column>
    <el-table-column
        prop="telNum"
        label="手机号">
    </el-table-column>
  </el-table>
  <el-pagination class="pagination"
    layout="prev, pager, next"
    :total="${totalRecords}"
    @current-change="fetchUsrs"
  >
  </el-pagination>
  <el-dialog title="新增/修改用户" :visible.sync="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
    <el-form>
      <el-form-item label="用户名">
        <el-input v-model="usrData.loginName" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="usrData.telNum" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="usrData.password" type="password" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" :loading="dialogBtnLoading">取消</el-button>
      <el-button type="primary" @click="submit" :loading="dialogBtnLoading">确定</el-button>
    </div>
  </el-dialog>
</div>
<script type="text/javascript">
  var usrVue = new Vue({
    el: "#usr",
    mounted: function () {
      this.fetchUsrs(1);
    },
    data: function() {
      return {
        tableData: [],
        loadingFlag: true,
        usrData: {loginName: "", password: "", telNum: "", realName: ""},
        dialogBtnLoading: false,
        dialogVisible: false
      }
    },
    methods: {
      fetchUsrs: function (p) {
        http.get("${basePath}emp/sys/usr/list", {params: {p: p - 1, max: 10}})
          .then(function (res) {
            usrVue.tableData = res.data;
            usrVue.loadingFlag = false;
          })
      },
      handleAdd: function () {
        this.dialogVisible = true;
        this.usrData = {loginName: "", password: "", telNum: "", realName: ""};
      },
      submit: function () {
        this.dialogBtnLoading = true;
        http.post("${basePath}emp/sys/usr/save_update", this.usrData)
          .then(function (res) {
            usrVue.$message({showClose: true, message: '保存成功', type: 'success'});
            usrVue.dialogVisible = false;
            usrVue.dialogBtnLoading = false;
            usrVue.fetchUsrs(1);
          }).catch(function (error) {
          usrVue.dialogBtnLoading = false;
        });
      }
    }
  })
</script>